<template>
    <div class="wrapper tag-item"> 
    <div class="fl left-list"> 
     <div class="tc-data-list"> 
      <div class="tc-list" >  
       <ul class="detail-list" v-infinite-scroll="loadMore"> 


        <li class="qa-item" v-for="(item,index) in list" :key="index"> 
         <!-- <div class="fl record"> 
          <div class="number"> 
           <div class="border useful"> 
                <p class="usenum">
                    <a @click="thumbup(index)" href="#" class="zan">
                        <i :class="'fa fa-thumbs-up ' + item.zan" aria-hidden="true"></i>
                    </a>
                </p> 
            <p class="zannum"> {{item.thumbup}} </p> 
           </div> 
           <div class="border answer"> 
            <a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a> 
           </div> 
          </div> 
         </div>  -->
         <div class="info"> 
          <p class="text"> 
              <router-link :to="'/spit/'+item.id"><p v-html="item.content"></p></router-link>
           
          </p> 
          <div class="other"> 
           <div class="fl date"> 
            <span>{{item.publishtime}}</span> 
           </div> 
           <div class="fr remark"> 
               <a @click="thumbup(index)" href="#" class="zan">
                        <i :class="'fa fa-thumbs-up ' + item.zan" aria-hidden="true"></i>
                   赞 </a>
               <a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i>收藏</a> &nbsp;
            <a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a> 
            <a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a> 
           </div> 
          </div> 
         </div> 
         <div class="clearfix"></div> </li> 



       </ul>        
      </div> 
     </div> 
    </div> 
    <div class="fl right-tag"> 
     <div class="block-btn"> 
      <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p> 
      <router-link class="sui-btn btn-block btn-share" to='/spit/submit'>发吐槽</router-link>
    


     </div> 
    </div> 
    <div class="clearfix"></div> 
   </div> 
  
</template>

<script>
import '@/assets/css/page-sj-spit-index.css'
import spitApi from '@/api/spit'
import  {getUser} from '@/utils/auth'



export default {
    head:{
       title: '十次方社交 - 吐槽'
    },
    asyncData(){
        return spitApi.search(1,10,{state:'1'}).then(res=>{
            return {
                list: res.data.data.rows
            }
        })
    },
    data(){
       return {
          pageNo:1,
          size:10,
          searchMap: {state:'1'} 
       }
    },
    methods:{
        loadMore(){
         
            spitApi.search(++this.pageNo,this.size,this.searchMap).then(res=>{
                this.list= this.list.concat(res.data.data.rows)
            })
        },
        thumbup(i){
           
            if(getUser().token == undefined){
                 this.$message({
                     message: '亲，请先登录再点赞',
                     type:'error'
                  })

                  return;
            }


            if(this.list[i].zan === 'color'){
                 this.$message({
                     message: '亲，不能重复点赞哦',
                     type:'error'
                  })

                  return;
            }


            spitApi.thumbup(this.list[i].id).then(res=>{
                this.$message({
                     message: res.data.message,
                     type: (res.data.flag?'success':'error')
                })

                if(res.data.flag){
                     this.list[i].thumbup++
                     this.list[i].zan = 'color'
                }
            })

        } 

    }
    
}
</script>